import React, { Component, Fragment } from 'react';
import { Card, Form, Input, Button, Select, Checkbox } from 'antd';
import { UserOutlined, LockOutlined } from '@ant-design/icons';
import './form.less';
const FormItem = Form.Item;
const { Option } = Select;
const layout = {
	labelCol: {
		span: 6,
	},
	wrapperCol: {
		span: 18,
	},
};
const tailLayout = {
	wrapperCol: {
		offset: 6,
		span: 18,
	},
};
class FormLogin extends Component {
	formRef = React.createRef();
	onFinish = values => {
		console.log(values);
	}
	onReset = () => {
		this.formRef.current.resetFields();
	};
	onFill = () => {
		this.formRef.current.setFieldsValue({
		    username: 'Hello world!',
			pwd: 'male',
		});
	};
	onGenderChange = value => {
		this.formRef.current.setFieldsValue({
			username: `Hi, ${value === 'male' ? 'man' : 'lady'}!`,
		});
	};
	render(){
		return (
			<Fragment>
				<Card title="行内表单" className="card-wrap">
					<Form layout="inline">
						<FormItem>
							<Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="user" />
						</FormItem>
						<FormItem>
							<Input prefix={<LockOutlined className="site-form-item-icon" />} placeholder="pwd" />
						</FormItem>
						<FormItem>
							<Button type="primary">登录</Button>
						</FormItem>
					</Form>
				</Card>
				<Card title="水平表单" className="card-wrap">
					<Form
						{...layout}
						ref={this.formRef}
						name="control-ref"
						onFinish={this.onFinish}
						initialValues={{
							'remember': 'A',
						}}
					>
						<FormItem
							name="username"
							label="username"
							rules={[
								{required: true, message: "请输入账号"}
							]}
						>
							<Input />
						</FormItem>
						<FormItem
							name="pwd"
							label="密码"
							rules={[
								{required: true, message: "请输入密码"},
								{min:6,max:10,message:"长度不在范围内"},
								{pattern: /^\w/g, message: "必须以字母开头"}
							]}
							hasFeedback
						>
							<Input.Password />
						</FormItem>
						<FormItem
							name="gender"
							label="Gender"
							rules={[
								{required: true,},
							]}
						>
							<Select
								placeholder="请选择"
								onChange={this.onGenderChange}
								allowClear
							>
								<Option value="male">male</Option>
								<Option value="female">female</Option>
								<Option value="other">other</Option>
							</Select>
						</FormItem>
						<FormItem
							noStyle
							shouldUpdate={(prevValues, currentValues) => prevValues.gender !== currentValues.gender}
						>
							{({ getFieldValue }) =>
								getFieldValue('gender') === 'other' ? (
									<FormItem
										name="customizeGender"
										label="Customize Gender"
										rules={[
											{required: true,},
										]}
									>
										<Input />
									</FormItem>
								) : null
							}
						</FormItem>
						<FormItem {...tailLayout}>
							<FormItem name="remember" valuePropName="checked" noStyle>
							    <Checkbox value="A">记住我</Checkbox>
							</FormItem>

							<Button type="link" className="login-form-forgot">
							    忘记密码
							</Button>
						</FormItem>
						<FormItem {...tailLayout}>
							<Button type="primary" htmlType="submit">登录</Button>
							<Button htmlType="button" onClick={this.onReset}>
								重置
							</Button>
							<Button type="link" htmlType="button" onClick={this.onFill}>
								填充
							</Button>
						</FormItem>
					</Form>
				</Card>
			</Fragment>
		)
	}
}

export default FormLogin;